<!-- 移动签批->公文校对单 -->
<template>
  <view>
    <view class="content">
      <view class="title">
        公文校对确认单
      </view>
      <view class="form-border" style="box-sizing: border-box;">
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>标题</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <span>{{ detailBody.title }}</span>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>签批件</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <span>签批件</span>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>正文</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <template v-if="detailDoc !=null">
              <view v-for="item in detailDoc" @click="lx.openFile(item, proInstId)">
                <span style="color: #0081ff;">{{ item.attachName }}</span>
              </view>
            </template>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>附件</label>
          </view>
          <view class="flex-five form-border-right">
            <template v-if="detailAttachment != undefined && detailAttachment.length > 0 ">
              <view v-for="item in detailAttachment"  @click="lx.openFile(item, proInstId)">
                <span style="color: #0081ff;">{{ item.attachName }}</span>
              </view>
            </template>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>排版文件</label>
          </view>
          <view class="flex-five form-border-right">
            <template v-if="detailOfd != undefined && detailOfd.length > 0 ">
              <view v-for="item in detailOfd"  @click="lx.openFile(item, proInstId)">
                <span style="color: #0081ff;">{{ item.attachName }}</span>
              </view>
            </template>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>拟稿人</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            {{detailBody.drafterName}}
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one flex-block form-border-right">
            <label>拟稿时间</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            {{detailBody.drafterTime}}
          </view>
        </view>
        <view class="form-row" style="min-height: 160rpx">
          <view class="flex-one flex-block form-border-right">
            <label>部门领导批示</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <template v-if="opinion != null && opinion['bmldProofReview'] != undefined">
              <view class="opinion" v-for="item in opinion.bmldProofReview">
                <view class="opinion-left">{{ item.opinion }}</view>
                <view class="opinion-right">
                  <!-- base64签名图片 -->
                  <img v-if="item.signature!='' && item.signature != undefined"
                       :src="`data:image/png;base64,`+item.signature" alt="图片未上传"/>
                  <text v-else class="opinion-user">{{ item.userName }}</text>
                  <text class="opinion-date">{{ item.approvalTime }}</text>
                </view>
              </view>
            </template>
          </view>
        </view>
        <view class="form-row" style="min-height: 160rpx">
          <view class="flex-one flex-block form-border-right">
            <label>综合司审批</label>
          </view>
          <view class="flex-five flex-center form-border-right">
            <template v-if="opinion != null && opinion['zhsProofReview'] != undefined">
              <view class="opinion" v-for="item in opinion.zhsProofReview">
                <view class="opinion-left">{{ item.opinion }}</view>
                <view class="opinion-right">
                  <!-- base64签名图片 -->
                  <img v-if="item.signature!='' && item.signature != undefined"
                       :src="`data:image/png;base64,`+item.signature" alt="图片未上传"/>
                  <text v-else class="opinion-user">{{ item.userName }}</text>
                  <text class="opinion-date">{{ item.approvalTime }}</text>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    opinionInfo: {
      type: Object,
      default: {},
    },
    detailBodyInfo: {
      type: Object,
      default: {},
    },
    proofBodyInfo: {
      type: Object,
      default: {},
    },
    detailDocInfo: {
      type: Object,
      default: {},
    },
    detailOfdInfo: {
      type: Object,
      default: {},
    },
    detailAttachmentInfo: {
      type: Object,
      default: {},
    },
  },
  onLoad: async function (option) {
    // 从缓存获取用户信息
    this.userInfo = this.cache.get('userInfo')
  },

  data() {
    return {
      title: '',   // 标题
      proInstId: '',
      userInfo: {},		 // 当前登录用户信息，目前先从缓存中获取
      paramObject: {}, // openwfneededdata数据
      detailBody: {},
      proofBody: {},
      detailDoc: [],
      detailAttachment: [],
      detailOfd: [],
      opinion: {},
    }
  },

  watch: {
    opinionInfo: {
      handler(nVal, oVal) {
        if (nVal != null) {
          this.opinion = nVal;
        }
      },
      immediate: true,
      deep: true,
    },
    detailBodyInfo: {
      handler(nVal, oVal) {
        if (nVal != null) {
          this.detailBody = nVal;
        }
      },
      immediate: true,
      deep: true,
    },
    proofBodyInfo: {
      handler(nVal, oVal) {
        if (nVal != null) {
          this.proofBody = nVal;
        }
      },
      immediate: true,
      deep: true,
    },
    detailDocInfo: {
      handler(nVal, oVal) {
        if (nVal != null) {
          this.detailDoc = nVal;
        }
      },
      immediate: true,
      deep: true,
    },
    detailOfdInfo: {
      handler(nVal, oVal) {
        if (nVal != null) {
          this.detailOfd = nVal;
        }
      },
      immediate: true,
      deep: true,
    },
    detailAttachmentInfo: {
      handler(nVal, oVal) {
        if (nVal != null) {
          this.detailAttachment = nVal;
        }
      },
      immediate: true,
      deep: true,
    },
  },

  mounted() {

  },

  methods: {

  },
}

</script>

<style scoped>
.content {
  padding: 10rpx;
  word-break: break-all;
}

.title {
  display: flex;
  justify-content: center;
  color: #ed1c24;
  font-weight: 600;
  font-size: 36rpx;
  margin-top: 60rpx;
  margin-bottom: 20rpx;
  letter-spacing: 10rpx;
}

.title span {
  color: #000000;
}

.form-border {
  border: 1px solid #ed1c24;
  border-bottom: none;
  border-right: none;
}

.form-border-right {
  border-bottom: 1px solid #ed1c24;
  border-right: 1px solid #ed1c24;
}

.form-border-bottom {
  border-bottom: 1px solid #ed1c24;
}

.form-margin {
  margin-left: -0.5px;
  margin-right: -0.5px;
}

.form-row {
  display: flex;
  justify-content: center;
  flex: 1;
}

.form-row label {
  color: #ed1c24;
  padding: 10rpx;
  text-align: center;
}

.form-row span {
  color: #000000;
  padding: 10rpx;
  text-align: left;
}

.flex-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flex-one {
  flex: 1;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-two {
  flex: 2;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-three {
  flex: 3;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-four {
  flex: 4;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-five {
  flex: 5;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-six {
  flex: 6;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-seven {
  flex: 7;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-eight {
  flex: 8;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-nine {
  flex: 9;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-ten {
  flex: 10;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-eleven {
  flex: 11;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-twelve {
  flex: 12;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-block-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  /* font-family: SimSun; */
}

.font-blue{
  color: #0081ff !important;
}

/* 意见相关样式 */
.opinion{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 26rpx;
  line-height: 24px;

}

.opinion .opinion-left{
  text-align: left;
  color: #323233;
}
.opinion .opinion-right{
  float:right;
  text-align: right;
  color: #969799;
  word-break: break-all;
}
.opinion .opinion-right .opinion-user{
  font-weight: 400;
  color: #000000;
}
.opinion .opinion-right .opinion-date{
  color: #323233;
  margin-left: 20rpx;
}
</style>
